<template>
  <!-- loading -->
  <el-button type="primary" @click="showLoading">loading显示和隐藏</el-button>
  <!-- 表格 -->
  <BasicTable
    :table-data="paginatedData"
    :loading="loading"
    :total="tableData.length"
    :current-page="currentPage"
    :page-size="pageSize"
    @handle-size-change="handlePageSizeChange"
    @handle-current-page-change="handleCurrentPageChange"
  >
    <template v-for="(column, index) in columnArr" :key="index">
      <el-table-column :prop="column.prop" :label="column.label" />
    </template>
  </BasicTable>
</template>

<script setup>
import BasicTable from './table.vue'
import { ref, computed } from 'vue'
const tableData = [
  {
    date: '1',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '3',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '4',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const columnArr = [
  {
    prop: 'date',
    label: '日期',
  },
  {
    prop: 'name',
    label: '姓名',
  },
  {
    prop: 'address',
    label: '地址',
  },
]
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(2)
const showLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}

const paginatedData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return tableData.slice(startIndex, endIndex)
})
const handlePageSizeChange = val => {
  pageSize.value = val
}

const handleCurrentPageChange = val => {
  currentPage.value = val
}
</script>

<style lang="scss" scoped></style>
